<template>
    <div>
        <Nav/>
        <div id='searchbg'></div>
        <div id="Search">
            <div class='searchs'>
                <div class="inputs">
                    <div class="input">
                        <input type="text" class="input-lg" v-model="inputvalue">
                    </div>
                    <div class='inputsearch'>
                        <router-link tag='el-button' :to="{path:'/search/all',query:{searchval:this.inputvalue}}" active-class="myactive">搜索</router-link>
                    </div>
                </div>
                <div class="ul">
                    <router-link tag='li' :to="{path:'/search/all',query:{searchval:this.inputvalue}}" active-class="myactive">全部</router-link>
                    <router-link tag='li' :to="{path:'/search/a',query:{searchval:this.inputvalue}}" active-class="myactive">文章</router-link>
                    <router-link tag='li' :to="{path:'/search/t',query:{searchval:this.inputvalue}}" active-class="myactive">问答</router-link>
                    <router-link tag='li' :to="{path:'/search/u',query:{searchval:this.inputvalue}}" active-class="myactive">用户</router-link>
                    
                </div>
            </div>
            <router-view></router-view>
        
        </div>
    </div>
</template>

<script>
import Nav from '@/components/Nav.vue'
export default {
    data(){
        return{
            inputvalue:''
        }
    },
    created(){
        this.inputvalue=this.$route.query.searchval
    },
    components: {
        Nav,
    },
    watch: {
        $route(to,from){
            this.inputvalue=this.$route.query.searchval  
        }
    },
}
</script>
<style>
    #searchbg{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: -99;
        background-color: #fff;
    }
    #Search{
        height: 200px;
        width: 100%;
        position: absolute;
        background-color:rgb(245,247,250);
    }
    #Search .searchs{
        position: absolute;
        width: 1200PX;
        left: 50%;
        transform: translateX(-50%);
    }
    #Search  .inputs{
        margin-top:90px;
    }
    #Search .input{
        float: left;
        /* padding-left: 15px;
        padding-right: 15px; */
        box-sizing: border-box;
        margin:0 15px;
        width: 750px;
        border: none;
    }
    #Search .input .input-lg{
        height: 45px;
        width: 100%;
        padding: 0px 10px;
        font-size: 18px;
        line-height: 1.33;
        border-radius: 6px;
        border: 1px solid #ccc;
        color: #555;
    }
    #Search .inputsearch{
        float: left;
        width: 120px;
        margin-top: 0px;
        margin-left: 15px;
        margin-right: 15px;
        box-sizing: border-box;
        border: none;
    }
    #Search .inputsearch button{
        height:20px ;
        width: 150px;
        margin-left: 15px;
        margin-right: 15px;
        font-size: 18px;
        letter-spacing: 0.1em;
        border-radius: 6px;
        color:white;
        background-color: rgb(64,158,255);
    }
    #Search .ul{
        clear: both;
        list-style: none;
        position: absolute;
        top: 100%;
        margin-top: 21px;
    }
    #Search li{
        float: left;
        width: 64px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        letter-spacing: 0.1em;
        color: #409EFF;
        border-bottom:3px solid transparent;
        transition: all .3s;
        /* padding:10px  */
        cursor: pointer;
    }
    /* #Search li:first-child{
        color: #555;
        border-bottom:3px solid #0872db
    } */
    #Search li:hover{
        background-color:rgb(238,238,238) ;
    }
    #Search  .myactive{
        color: #555;
        border-bottom:3px solid #0872db;
        background-color: none;
    }
    #Search  div .myactive:hover{
        background-color: none;
    }
    /* #Search li:focus{
        color: #555;
        border-bottom:3px solid #0872db
    } */

    #searchAlls{
    width: 1200px;
    position: relative;
    left: 50%;
    top: 200px;
    margin-left: 20px;
    transform: translateX(-50%);
    }
    #searchAlls .searchAllh3{
        color: #757575;
        font-weight: normal;
        position: relative;
        /* top: 260px; */
        line-height: 1.2;
        margin-left: 20px;
    }
    #searchAlls .searchAll{
        position: relative;
        /* top: 260px; */
        margin:15px;
    }
    #searchAlls h3{
        font-size: 1.3rem;
        font-weight: 900;
        letter-spacing: .08em;
        color:rgb(64,158,255);
        margin-top: 20px;
        padding-bottom: 0;
        transition: all .5s;
    }
    #searchAlls .searchAll h3:hover{
        color:rgb(4, 109, 214);
    }
    #searchAlls p{
        margin-top: 10px;
        width: 700px;
        line-height: 24px;
        max-height: 48px;
        overflow: hidden;
    }
    #searchAlls .searchAll .p1{
        color: #888;
    }
</style>